<template>
  <div class="header">
    <el-image :src="info.picUrl"/>
    <div class="title">
      <div class="header">
        <h2>{{info.name}}</h2>
        <span>{{info.alias}}</span>
        <span class="a">个人主页 > </span>
      </div>
      <div>
        <el-button><i-bi-play-fill />播放全部</el-button>
        <el-button><i-bi-person-plus />关注</el-button>
        <el-button><i-bi-person-plus-fill />取消关注</el-button>
      </div>
    </div>
  </div>
  <div class="body">
    <el-tabs v-model="activeTab" @tab-change="tabChange">
      <el-tab-pane key="song" name="song">
        <template #label>
          单曲
          <span v-if="songCount > 0">({{songCount}})</span>
        </template>
        <singer-song-table :tableData="tableData" />
      </el-tab-pane>
      <el-tab-pane key="album" label="专辑" name="album">
        <album-table :table-data="albumList"/>
      </el-tab-pane>
      <el-tab-pane key="detail" label="详情" name="detail">
        详情
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import {useRoute} from "vue-router";
import { reactive, ref, watch,onMounted,onBeforeUnmount } from "vue";
import SingerSongTable from "./SingerSongTable.vue";
import { Song,Album } from "@/assets/apis/MusicDataType";
import { artistsPageSongs,artistAlbum } from "@/assets/apis/http";
import util from "@/tools/util";

const route = useRoute()
const songCount=ref(0)
const singerId = ref(route.params.id)
const activeTab = ref(route.params.tab);
const tableData = reactive<Song[]>([]);
const albumList = reactive<Album[]>([]);
const info = reactive(route.query)

async function getSongs() {
  let query = { id: singerId.value, order: "hot", pageNum: 1 };
  console.log("歌手歌曲查询", query);
  let res = await artistsPageSongs(query);
  console.log("歌手歌曲", res);
  let songlist = res.songs.map(song => {
    return {
      id: song.id,
      name: song.name,
      singer: song.ar,
      albumPic: info.pic,
      album: song.al.name,
      alia: song.alia[0],
      duration: song.dt,
      fee: song.fee,
      url: "https://music.163.com/song/media/outer/url?id=" + song.id + ".mp3"
    };
  });
  songCount.value = res.total
  tableData.splice(0, tableData.length, ...songlist);
}
onMounted(async () => {
  activeTab.value = route.params.tab; // 初始化 activeTab
  singerId.value = route.params.id; // 初始化 singerId
  Object.assign(info, route.query); // 初始化 info
  await getSongs(); // 获取歌曲
});
const tabChange = async (targeName: string) => {
  if (targeName === "album" && albumList.length === 0) {
    let query = { id: singerId.value, limit: 50, pageNum: 1 };
    let res = await artistAlbum(query);
    console.log("歌手专辑",res)
    let album = res.hotAlbums.map(item => {
      return {
        id: item.id,
        name: item.name,
        blurPicUrl: util.formatSongsPic(item.picUrl,50),
        artists: item.artists.map(({ name, id }) => ({ name, id })),
        publishTime: util.formatMsgDate(item.publishTime)
      };
    });
    albumList.splice(0,0,...album)
    console.log("歌手专辑",albumList)
  }
}
const idWatcher = watch(
  () => [route.params.tab, route.params.id], // 监听多个参数
  async ([newTab, newId]) => {
    if (route.path.startsWith('/singers/') && newId !== undefined) {
      activeTab.value = newTab;
      singerId.value = newId;
      Object.assign(info, route.query);
      getSongs()
    }
  }
);
// 在组件卸载前停止监听
onBeforeUnmount(() => {
  idWatcher(); // 停止监听
});
</script>
<style scoped lang="scss">
.header{
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
  height: 200px;
  .title{
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: space-around;
    .header {
      display: block;
      .a{
        cursor: pointer;
        margin-left: 30px;
        color: var(--el-color-primary-light-3)
      }
    }
  }
}
.body{
  margin: 20px;
}
</style>
